
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="职教招生网">
<meta name="author" content="职教招生网">
<title>职教招生网</title>
<link rel="stylesheet" href="static/css/lib/vant.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/lib/vant.js"></script>
<script src="./static/js/component.js" defer></script>
<script src="./static/js/nav.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-school" id="app">
    <layout :header="true">
      <div class="zxb-school-box ">
        <dl class="left">
          <dd v-for="(item, index) in zy" class="item" :class="{on : zyId === item.id}" @click="getId({name:'zyId', id:item.id})">{{item.name}}</dd>
        </dl>
        <div class="right ">
          <div class="ri-box">
            <div class="top">
              <dl class="dl">
                <dd v-for="(item, index) in city" class="item" :class="{on : cityId === item.id}" @click="getId({name:'cityId', id:item.id})">{{item.name}}</dd>
              </dl>
            </div>
            <div class="list" v-if="school.length > 0">
              <a v-for="(item, index) in school" :href="'schoolDetail.html?id='+item.id" class="item flex-bect">
                <img :src="item.logo" class="logos" alt="" />
                <div class="div flex1">
                  <div class="name">{{item.name}}</div>
                  <div class="address">地址：<span class="red">{{item.address}}</span></div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </layout>
  </div>

  <script type="text/babel">
    let schoolItem = {id:1, name:'广东外语外贸大学高等继续教育学院', address:'黑龙江省哈尔滨市', logo:'./static/image/school/school4.png'}
    new Vue({
      el: '#app',
      data: {
        school:[],
        zy:[],
        city:[],
        cityId:'',
        zyId:''
      },
      mounted() {
        this.getCon();
      },
      methods:{
        getId(e){
          console.log(e)
          this[e.name] = e.id
        },
        getCon(){
          this.school = [schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem,schoolItem]
          this.zy = [
            {id:1, name:'学前教育'},{id:2, name:'工商管理'},{id:3, name:'医院护理'},{id:4, name:'工业机器人'},
            {id:5, name:'经济管理'},{id:6, name:'IT/计算机'},{id:7, name:'软件工程'},{id:8, name:'影视专业'},
            {id:9, name:'艺术类'},{id:10, name:'会计专业'},{id:11, name:'语言法律'},{id:12, name:'机械工程'},
            {id:13, name:'教育理学'},{id:14, name:'互联网金融'}
          ]
          this.city=[
            {id:1, name:'北京'},{id:2, name:'天津'},{id:3, name:'河北'},{id:4, name:'山西'},{id:5, name:'内蒙古'},
            {id:6, name:'辽宁'},{id:7, name:'黑龙江'},{id:8, name:'吉林'},{id:9, name:'上海'},{id:10, name:'江苏'},
            {id:11, name:'浙江'},{id:12, name:'安徽'},{id:13, name:'福建'},{id:14, name:'江西'},{id:15, name:'山东'},
            {id:16, name:'河南'},{id:17, name:'湖北'},{id:1, name:'湖南'},{id:19, name:'广东'},{id:20, name:'广西'},
            {id:21, name:'海南'},{id:22, name:'重庆'},{id:23, name:'四川'},{id:24, name:'贵州'},{id:25, name:'云南'},
            {id:26, name:'西藏'},{id:27, name:'陕西'}
          ]
        }
      }
    })
  </script>
</body>
</html>